<template>
  <div class="user-container">
    <van-row @click="openmodel">
        <van-col span="6">
          <img :src="avatarSrc" alt="">
        </van-col>
        <van-col span="15">{{nickname}}</van-col>
        <van-col span="3">
          <van-icon name="arrow" />
        </van-col>
    </van-row>
    <!-- <hr> -->
    <van-grid>
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    <!-- 登录框 -->
    <transition name="van-fade">
      <div class="login-model" v-show="isShowmodel" >
      <div class="close-model" @click="isShowmodel=!isShowmodel"></div>
      <van-form @submit="onSubmit" class="form-model">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
      </div>
    </transition>
  </div>
</template>

<script>
import { Gologin } from '@/request/api.js'
export default {
  data() {
    return {
      avatarSrc: require('@/assets/avatar.png'),
      username: '',
      password: '',
      isShowmodel: false,
      nickname: '用户登录'
    }
  },
  created() {
    // 组件刚创建时，看是否有token  刷新检查页面
    const token = localStorage.getItem('token')
    if (token) {
      // 执行下面的代码
      const userinfo = JSON.parse(localStorage.getItem('userInfo'))
      this.nickname = userinfo.nickname
      this.avatarSrc = userinfo.avatar
    }
  },
  methods: {
    onSubmit(values) {
      // console.log('submit', values)
      const username = values['用户名']
      const pwd = values['密码']
      Gologin({ username, pwd }).then(res => {
        if (res.errno === 0) {
          console.log(res.data)
          // 登录成功
          // 业务逻辑
          // 1.提示框显示成功
          this.$toast.success('登录成功')
          // 2.把token放在本地存储
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
          // 3.1s后关闭模态框
          setTimeout(() => {
            this.isShowmodel = !this.isShowmodel
            this.nickname = res.data.userInfo.nickname
            this.avatarSrc = res.data.userInfo.avatar
          }, 1000)
          // 4.userInfo信息，写到页面上
        }
      })
    },
    // 判断是否登录取反模态框
    openmodel() {
      const token = localStorage.getItem('token')
      if (token) {
      } else {
        this.isShowmodel = !this.isShowmodel
      }
    }
    // isShowmodelclick() {
    //   this.isShowmodel = true
    // }
  }
}
</script>

<style lang='less'>
.van-row{
  margin-bottom: .0125rem;
  background-color:rgb(34, 33, 33);
  color: aliceblue;
  height: 1rem;
    img{
    border-radius: 50%;
    height: .8rem;
    padding: .1rem;
  }
  .van-col:nth-child(2){
    line-height: 1rem;
    padding-left: .125rem;
  }
  .van-col:nth-child(3){
    padding-left: .25rem;
    line-height: 1rem;
  }
}
.van-grid{
  margin-top: .025rem;
}

.login-model{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  .form-model{
    background-color: #fff;
    padding-bottom: .125rem;
    width: 80%;
    position: absolute;
    left: 50%;
    top: 30%;
    margin-left: -39%;
  }
  .close-model{
    width: 100%;
    height: 100%;
    background-color:rgba(0,0,0,0.5);

  }
}

</style>
